<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
	<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
	<META HTTP-EQUIV="Expires" CONTENT="0">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
</head>
<body>

<div class="addclass" style="text-align: left;">
	<div id="app">
		<div class="main">
			<div class="tit">客户：</div>
			<el-form :inline="true" size="small" :model="shortForm" class="demo-form-inline">
				<el-form-item label="客户姓名">
					<el-autocomplete popper-class="my-div"
							:popper-append-to-body="false"
							v-model="shortForm.name"
							:fetch-suggestions="nameSearch"
							:trigger-on-focus="false"
							v-clear-emoij
							:maxlength="45"
							style="width: 100px"
							placeholder="客户">

						<template slot-scope="{ item }">
							<div class="name" @click="nameBut(item)" v-html="item.newHtml"></div>
						</template>
					</el-autocomplete>
				</el-form-item>
				<el-form-item label="手机号">
					<el-input v-model="shortForm.phone" placeholder="手机号" style="width: 120px"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="shortForm.addr" placeholder="地址" style="width: 260px"></el-input>
				</el-form-item>
			</el-form>
			<div class="tit">商品：</div>
			<el-form :inline="true" size="small" :model="shortForm" class="demo-form-inline">
				<div v-for="(domain, index) in shortForm.domains" :key="domain.key">
					<!--<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>-->
					<el-form-item label="商品名称">
						<!-- <el-input v-model="domain.name" @keyup.enter.native="shopKey()" placeholder="商品名称">
                        </el-input> -->
						<el-autocomplete
								popper-class="my-div"
								:popper-append-to-body="false"
								v-model="domain.name"
								:fetch-suggestions="commoditySearch"
								:trigger-on-focus="false"
								v-clear-emoij
								:maxlength="45"
								placeholder="商品名称">
							<template slot-scope="{ item }">
								<div class="name" @click="commodityBut(item, domain)" v-html="item.newHtml"></div>
							</template>
						</el-autocomplete>
					</el-form-item>
					<el-form-item label="数量">
						<el-input v-model="domain.num" placeholder="1" @change="handleChange" style="width: 60px"></el-input>

					</el-form-item>
					<el-form-item label="单价">
						<el-input v-model="domain.price" placeholder="单价" readonly="true" style="width: 80px"
								  disabled="true"></el-input>
					</el-form-item>
					<!--				<el-form-item label="当前商品金额">-->
					<!--					<div placeholder="当前商品金额" v-model="domain.money"><span>{{domain.money}}</span>元</div>-->
					<!--				</el-form-item>-->
					<el-form-item label="">
						<el-button type="info" v-if="shortForm.domains.length > 1"
								   @click.prevent="removeDomain(domain)">
							删除
						</el-button>
						<el-button v-if="shortForm.domains.length-1 == index" @click.prevent="addDomain">添加
						</el-button>
					</el-form-item>
				</div>
			</el-form>
			<div class="tit">赠品：</div>
			<el-form :inline="true" size="small" :model="shortForm" class="demo-form-inline">
				<div v-for="(domain, index) in shortForm.domains2" :key="domain.key">
					<el-form-item label="赠品名称">
						<el-autocomplete
								popper-class="my-div"
								:popper-append-to-body="false"
								v-model="domain.name"
								:fetch-suggestions="commoditySearch"
								:trigger-on-focus="false"
								v-clear-emoij
								:maxlength="45"
								placeholder="商品名称">
							<template slot-scope="{ item }">
								<div class="name" @click="giftBut(item, domain)" v-html="item.newHtml"></div>
							</template>
						</el-autocomplete>
						<!-- <el-input v-model="domain.name" placeholder="赠品名称"></el-input> -->
					</el-form-item>
					<el-form-item label="数量">
						<el-input v-model="domain.num" placeholder="1" :min="1" style="width: 60px"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-button type="info" v-if="shortForm.domains2.length > 1"
								   @click.prevent="removeDomain2(domain)">
							删除
						</el-button>
						<el-button v-if="shortForm.domains2.length-1 == index" @click.prevent="addDomain2">添加
						</el-button>
					</el-form-item>
				</div>
				<el-form-item label="支付方式" style="margin-top: 30px;margin-left: -20px;">
					<el-radio-group v-model="shortForm.type">
						<el-radio label="1">微信</el-radio>
						<!--默认微信-->
						<el-radio label="2">支付宝</el-radio>
						<el-radio label="3">银联</el-radio>
						<el-radio label="5">账户</el-radio>
						<el-radio label="4">现金</el-radio>
					</el-radio-group>

				</el-form-item>
				<span style="margin-left: 60px;margin-top: 20px;">订单金额 <font color="red" size="8">{{shortForm.totalPrice}}</font> 元</span>

				<el-form-item style="display: block; margin-left: -20px;" label="备注信息">
					<el-input v-model="shortForm.remark" style="width: 620px;"></el-input>
				</el-form-item>
				<el-form-item style="display: block; margin-left: -20px;" label="实付金额">
					<el-input v-model="shortForm.amount" placeholder="实付金额"></el-input>
				</el-form-item>
				<el-form-item style="display: block;">
					<el-button type="primary" @click.prevent="submitData">保存订单</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					shortForm: {
						domains: [{
							name: '',
							num: 0,
							id: '',
							price: 0,
							money: 0
						}],
						domains2: [{
							name: '',
							id: '',
							num: 1
						}],
						user: '',
						phone: '',
						addr: '',
						amount: '',
						totalPrice: 0,
						customerId: '',
						remark: '',
						type: '1'
					},
					product: {
						//产品名称
						name: '产品',
						price: 0
					},
				};
			},
			methods: {
				// 客户名称搜索提醒
				nameSearch(queryString, cb) {
					let that = this
					let results = []
					$.getJSON('/findCustomerByPinyin?jsonpCallback=?&pinyin=' + queryString, function(data){
						results = data
						let regExp2 = new RegExp('\\(', 'g')
						let queryString2 = queryString.replace(regExp2, '\\(')
						let regExp = new RegExp(queryString2, 'g')
						results.map(function(item) {
							item.value = item.name
							let newHtml = item.remark.replace(regExp, "<span style='color:#5D55FC'>"+queryString+"</span>")
							item.newHtml = newHtml
						})
						cb(results)
					})
				},
				nameBut(row) {
					this.shortForm.phone = row.phone
					this.shortForm.addr = row.addr
					this.shortForm.customerId = row.id
				},
				commoditySearch(queryString, cb) {
					let that = this
					let results = []
					$.getJSON('/findProductByPinyin?jsonpCallback=?&pinyin=' + queryString, function(data){
						results = data
						let regExp2 = new RegExp('\\(', 'g')
						let queryString2 = queryString.replace(regExp2, '\\(')
						let regExp = new RegExp(queryString2, 'g')
						results.map(function(item) {
							item.value = item.name
							let newHtml = item.remark.replace(regExp, "<span style='color:#5D55FC'>"+queryString+"</span>")
							item.newHtml = newHtml
						})
						cb(results)
					})
				},
				commodityBut(row, domain) {
					domain.price = row.purchasePrice
					domain.id = row.id
					this.calculateTotalPrice()
				},
				giftBut(row, domain) {
					domain.id = row.id
				},
				handleChange() {
					this.calculateTotalPrice()
				},
				calculateTotalPrice() {
					this.shortForm.totalPrice = 0
					this.shortForm.domains.map((item) => {
						this.shortForm.totalPrice += item.num * item.price
					})
					this.shortForm.amount = this.shortForm.totalPrice
				},
				//计算金额
				calculate(item) {
					var index = this.shortForm.domains.indexOf(item);
					if (index !== -1) {
						var num = this.shortForm.domains[index].num;
						var price = this.shortForm.domains[index].price;
						this.shortForm.domains[index].money = parseFloat(num) * parseFloat(price);
					}
				},
				submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							alert('submit!');
						} else {
							console.log('error submit!!');
					return false;
				}
				});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				},
				removeDomain(item) {
					var index = this.shortForm.domains.indexOf(item);
					if (index !== -1) {
						this.shortForm.domains.splice(index, 1)
						this.calculateTotalPrice()
					}
				},
				addDomain() {
					this.shortForm.domains.push({
						name: '',
						num: '',
						price: 0,
						money: 0,
						key: Date.now()
					});
				},
				removeDomain2(item) {
					var index = this.shortForm.domains2.indexOf(item);
					if (index !== -1) {
						this.shortForm.domains2.splice(index, 1)
					}
				},
				submitData() {
					var index = this.shortForm;
					// console.log(index);
					//调接口
					axios.post('/addOrder', {
						"name": this.shortForm.name,
						"phone": this.shortForm.phone,
						"addr": this.shortForm.addr,
						"productList": this.shortForm.domains,
						"giftList": this.shortForm.domains2,
						"type": this.shortForm.type,
						"amount": this.shortForm.amount,
						"totalPrice": this.shortForm.totalPrice,
						"customerId": this.shortForm.customerId,
						"remark": this.shortForm.remark
					}).then(response => {
						if( response.data.returnCode === "00"){
						    top.showMessage("操作成功!");
							closeIframeWindow();
							gridReload("shopList");
						}else{
							top.showMessage("<font color='red'>" + response.data.returnMsg  + "</font>!");
						}
					}, error => {
						console.log('错误', response.message)
					});
				},
				addDomain2() {
					this.shortForm.domains2.push({
						name: '',
						num: 1,
						key: Date.now()
					});
				}
			},
			watch: {}
		})
	</script>
<style>
	.main {
		width: auto;
		margin: 20px auto;
		color: #000;
		padding-left: 4%;
	}

	.tit {
		margin-bottom: 10px;
		margin-top: 30px;
	}

	.demo-form-inline {
		margin-left: 20px;
	}
	.my-div{
		width: 600px!important;;
	}
</style>

</div>

</body>
</html>